<template>
  <div class="menu">
    <el-menu
      class="el-menu-vertical-demo"
      unique-opened
      :default-active="active"
      >
      <el-submenu index="1">
        <template slot="title">
          <i class="iconfont menu-first">&#xe68a;</i>
          <span>{{$t('router.export')}}</span>
        </template>
        <el-menu-item @click="toPath('transport','router.exportSearch','1-1')" index="1-1">{{$t('router.exportSearch')}}</el-menu-item>
        <el-menu-item @click="toPath('warehouse','router.exportWarehouse','1-2')" index="1-2">{{$t('router.exportWarehouse')}}</el-menu-item>
        <el-menu-item @click="toPath('sign','router.exportSign','1-3')" index="1-3">{{$t('router.exportSign')}}</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="iconfont menu-first">&#xe68a;</i>
          <span>{{$t('router.import')}}</span>
        </template>
        <el-menu-item @click="toPath('import/transport','router.exportSearch','2-1')" index="2-1">{{$t('router.exportSearch')}}</el-menu-item>
        <el-menu-item @click="toPath('import/importHandover','router.exportHandover','2-2')" index="2-2">{{$t('router.exportHandover')}}</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="iconfont menu-first">&#xe616;</i>
          <span>{{$t('router.country')}}</span>
        </template>
        <!-- <el-menu-item @click="toPath('transport/transportManagement','router.countryAdmin','3-1')" index="3-1">{{$t('router.countryAdmin')}}</el-menu-item> -->
        <el-menu-item @click="toPath('transport/transportSearch','router.exportSearch','3-2')" index="3-2">{{$t('router.exportSearch')}}</el-menu-item>
        <!-- <el-menu-item @click="toPath('transport/carApplication',`${$t('router.carTransport')}`,'3-3')" index="3-3">{{$t('router.carTransport')}}</el-menu-item> -->
        <!-- <el-menu-item @click="toPath('transport/dangerTransport','危险品运输申请','3-4')" index="3-4">危险品运输申请</el-menu-item> -->
        <!-- <el-menu-item @click="toPath('transport/ltlTransport',`${$t('router.ltlTransport')}`,'3-5')" index="3-5">{{$t('router.ltlTransport')}}</el-menu-item> -->
        <el-menu-item @click="toPath('transport/approvalSearch','router.carApproval','3-6')" index="3-6">{{$t('router.carApproval')}}</el-menu-item>
        <el-menu-item @click="toPath('transport/landReceipt','router.landReceipt','3-7')" index="3-7">{{$t('router.landReceipt')}}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
      active: '1'
    }
  },
  activated() {
    this.active = JSON.parse(window.sessionStorage.getItem('active'))
  },
  methods: {
    handle(value) {
      this.index = value
    },
    // 路由跳转
    toPath(url,text,active) {
      window.sessionStorage.setItem('active',JSON.stringify(active))
      this.$router.push({
        path: `/${url}`,
        query: {
          type: text
        }
      })
    }
  }
}
</script>

<style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../../../assets/font/my-iconfont.ttf") format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 4.444vw;
  color: #639df5;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.first {
  padding: 2.778vw 0;
}
.menu-first {
  font-size: 5.556vw;
  font-weight: 600;
  padding-right: 2.778vw;
}
.first .open {
  display: inline-block;
  width: 5.556vw;
  border-radius: 2px;
  height: 5.556vw;
  border: 0.833vw solid #b3b3b3;
  border-top-color: transparent;
  border-left-color: transparent;
  position: absolute;
  right: 0;
  top: 3%;
  transform: rotate(45deg);
  transition: .3s linear;
}
.first div {
  display: flex;
  padding: 0 2.778vw;
}
.first div span:nth-child(2) {
  width: 80%;
  position: relative;
  padding: 0 2.778vw;
}
.menu-text {
  font-size: 4.444vw;
  font-weight: 400;
}
.menu-text li {
  padding: 2.778vw;
}
.turn {
  transform: rotate(-135deg) !important;
  top: 8% !important;
}
.over {
  display: none;
}
.flow {
  display: block;
}
.three {
  transform: rotate(-135deg) !important;
  top: 4% !important;
}
/deep/.el-menu-item {
  padding-left: 13.889vw !important;
}
/deep/.el-menu {
  font-weight: 550;
}
</style>
